<ion-header>
  <ion-navbar>
    <ion-title>ionic2tabs</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <div padding-horizontal padding-top>
    <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
      <ion-item>
        <ion-input type="text" formControlName="username" placeholder="用户名" clearInput autocomplete="off"></ion-input>
      </ion-item>
      <div *ngIf="!loginForm.controls.username.valid && loginForm.controls.username.touched" class="validation-failed">
        请输入正确用户名
      </div>

      <ion-item>
        <ion-input type="password" formControlName="password" placeholder="密码" clearInput autocomplete="off"></ion-input>
      </ion-item>
      <div *ngIf="!loginForm.controls.password.valid && loginForm.controls.password.touched" class="validation-failed">
        请输入密码
      </div>

      <div  padding-horizontal padding-top>
        <button ion-button block type="submit" [disabled]="!loginForm.valid||submitted">登 录</button>
      </div>
    </form>
  </div>
  <ion-grid>
    <ion-row>
      <ion-col text-center tappable (click)="findPassword()">
        <button ion-button small clear>忘记密码</button>
      </ion-col>
      <ion-col text-center tappable (click)="toRegister()">
        <button ion-button small clear>注　册</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
